import React, { useState, Fragment } from 'react';
import { List, Pagination, Dropdown, Row, Col,  } from 'antd';
import { handleTime, } from '../../tool/birthdayToStuStatus';

function AnnouncementList({
  announcementItem,
  announcement,
  showAnn,
  handleMenuClick,
  role
}) {

  const [page, setPage] = useState(1);
  const pageSize = 10;
  const start = (page - 1) * pageSize;
  const end = start + pageSize;
  const paginatedData = announcement?.slice(start, end).map((item, index) => {
    return { ...item, index: index + 1 + start }
  })

  const onPageChange = (page, pageSize) => {
    setPage(page);
  };

  const items = [
    {
      label: '修改',
      key: 'update',
    },
    {
      label: '删除',
      key: 'delete',
    },
  ];

  return (
    <Fragment>
      <List
        size="small"
        dataSource={announcement}
        style={{ width: "60rem", }}
      >
        {
          paginatedData?.map((item) => {
            return (
              <List.Item
                key={item.fd_id}
                column={2}
                style={{ borderBottom: "1px solid #CBD6E2" }}
              >
                <span>
                  <Row
                    onClick={() => { showAnn(); announcementItem(item) }}
                    style={{ width: "56rem" }}
                  >
                    <Col flex="auto">
                      {item.fd_title}
                    </Col>
                    <Col flex="85px">
                      {handleTime(item.fd_createTime)}
                    </Col>
                  </Row>
                </span>

                {
                  role?.fd_type === "teacher" ?
                    <span>
                      <Dropdown.Button
                        size='small'
                        style={{ display: "inline" }}
                        type='text'
                        menu={{
                          items,
                          onClick: (e) => { handleMenuClick(e, item.fd_id) },
                        }}
                        placement="bottomLeft" />
                    </span> :
                    ''
                }
              </List.Item>
            )
          })
        }
      </List>
      <Pagination
        size='small'
        current={page}
        pageSize={pageSize}
        total={announcement?.length}
        onChange={onPageChange}
        showSizeChanger={false}
        style={{ marginTop: '15px', textAlign: "right" }}
      />
    </Fragment>
  );
}

export default AnnouncementList;

